<template>
  <div>
    <div class="boxshadow">
      <van-icon size="2.5em" name="todo-list-o"></van-icon>
      <span class="send">我要加入，点此...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; >>></span>
      <van-icon class="keyframe" name="aim" style="float: right;" @click="joinUs"></van-icon>
    </div>
    <!-- 弹出层 -->
    <van-dialog
      style="height: 80vh; overflow: scroll;"
      v-model="showDialog"
      @confirm="joinIn"
      showCancelButton
      @cancel="closed"
      confirmButtonText="报 名"
      title="学生组织报名信息填写"
    >
      <van-divider>班级</van-divider>
      <van-field
        readonly
        clickable
        name="college"
        :value="joinOrg.appclassify"
        placeholder="点击选择班级"
        @click="classPicker = true"
      />

      <van-divider>QQ</van-divider>
      <van-field placeholder="请输入qq" v-model="joinOrg.appqq" />
      <van-divider>兴趣爱好</van-divider>
      <van-field placeholder="把你最喜欢的东西告诉我们趴" v-model="joinOrg.apphobby" />
      <van-divider>自我介绍</van-divider>
      <van-field type="textarea" placeholder="给我们一个需要你的理由" v-model="joinOrg.appintro" />
    </van-dialog>
    <van-popup v-model="classPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="classList"
        @confirm="onConfirm"
        @cancel="classPicker = false"
      />
    </van-popup>
    <van-popup
      :class="msgColor ? 'msgSucColor': 'msgErrColor'"
      v-model="show"
      @close="onClose"
    >{{content}}</van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    orginfoForm: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      joinOrg: {},
      showDialog: false,
      classList: [],
      classPicker: false,
      show: false,
      content: "",
      msgColor: true
    };
  },
  mounted() {
    this.getClassList();
  },
  methods: {
    joinUs() {
      this.showDialog = true;
    },
    joinIn() {
      this.joinOrg.appname = this.userInfo.name;
      this.joinOrg.appnumber = this.userInfo.number;
      this.joinOrg.apptel = this.userInfo.telephone;
      this.joinOrg.apptype = this.orginfoForm.orgtype;
      this.joinOrg.orgname = this.orginfoForm.orgname;
      this.dateFilter();

      this.$api
        .post("/api/application/add", this.joinOrg)
        .then(res => {
          this.showDialog = false;
          this.msgColor = true;
          this.content = res.data.message;
          this.show = true;
        })
        .catch(() => {
          this.content = "已经报名过该部门，不可重复报名";
          this.msgColor = false;
          this.show = true;
        });
    },
    dateFilter() {
      let v = new Date();
      let yyyy = v.getFullYear();
      let MM = v.getMonth() + 1;
      let dd = v.getDay();
      let hh = v.getHours();
      let mm = v.getMinutes();
      let ss = v.getSeconds();
      let date = `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`;
      this.joinOrg.appcreatedate = date;
    },
    closed() {
      this.joinOrg = {};
    },
    getClassList() {
      this.$api
        .get("/api/organclass/list")
        .then(res => {
          this.classList = [];
          this.isProcessing(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    isProcessing(arr) {
      arr.forEach(item => {
        this.classList.push(item.organclass);
      });
    },
    onConfirm(v) {
      this.joinOrg.appclassify = v;
      this.classPicker = false;
    },
    onClose() {
      this.show = false;
      this.joinShow = false;
    }
  }
};
</script>

<style scoped>
.boxshadow {
  margin: 0 auto;
  width: 82vw;
  height: 4vh;
  background-color: #efe8fa;
  box-shadow: 0 0 25px #999;
  padding: 1vh 3vw 1vh 3vw;
}
.send {
  display: inline-block;
  font-size: 1.6em;
  transform: translate(9px, -8px);
}
.keyframe {
  font-size: 2.5em;
  animation: mySize 1s infinite;
}

@keyframes mySize {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.msgSucColor {
  width: 72vw;
  padding: 4vw;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #00ff00;
}
.msgErrColor {
  width: 72vw;
  padding: 4vw;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #ff0000;
}
</style>